<template>
  <div class="container-box">
    <div v-if="!flag && isRead === '0'">
      <h3 class="ml50">
        專案號：<font class="connectColor">{{ itemNo }}</font>
      </h3>
      <div ref="section1">
        <div class="form-box">
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-position="right"
            label-width="80px"
            class="demo-ruleForm"
          >
            <h3 class="title">重新設定專案密碼</h3>
            <el-form-item prop="lawPwd" label="專案密碼">
              <el-input type="password" v-model="ruleForm.lawPwd" placeholder="請輸入專案密碼" clearable></el-input>
            </el-form-item>
            <el-form-item prop="reNewPassword" label="確認密碼">
              <el-input type="password" v-model="ruleForm.reNewPassword" placeholder="請再輸入一次" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div ref="section2">
        <h3 class="title ml50">已配置此專案的網絡硬盤：<span class="baseColor">{{ showNetwork }}</span></h3>

      </div>
      <div ref="section4">
        <h3 class="title ml50">未配置的追蹤器的編號：<span class="baseColor">{{ showDish }}</span></h3>

      </div>
      <el-button type="primary" v-if="isRead === '0'" size="medium" @click="onNext" class="next" :loading="loading">確認修改</el-button>
    </div>
    <div ref="section5" v-if="flag || isRead === '1'">
      <h3 class="title ml50" v-if="isRead !== '1'">配置成功</h3>
      <h3 class="ml50">
        {{ isRead !== '1' ? '你正在使用' : '所配置的' }}網絡硬盤：<span class="baseColor">{{ showNetwork }}, </span>
        <font class="connectColor" v-if="isRead !== '1'">運作正常, </font>
        <font class="disconnectColor" v-if="isRead !== '1'">數據同步</font>
      </h3>
      <h3 class="ml50">
        所配置的追蹤器的編號：<span class="baseColor">{{ showDish }}</span>
      </h3>
      <h3 class="ml50">
        專案號：<font class="connectColor">{{ itemNo }}</font>
      </h3>
      <div style="text-align: center;">
        <el-button type="primary" size="medium" @click="onToMap" :loading="loading">進入地圖界面</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import NetdiskCard from './components/netdisk-card.vue'
import AssetsCard from './components/assets-card.vue'

export default {
  name: 'create-case',

  components: {
    [NetdiskCard.name]: NetdiskCard,
    [AssetsCard.name]: AssetsCard
  },

  data() {
    return {
      flag: false,
      loading: false,
      ruleForm: {
        userId: '',
        name: '',
        facilitys: '',//设备id
        dishIds: '', //网盘id
        lawPwd: '',
        reNewPassword: '',
        lawCaseId: ''
      },
      netdiskId: [],//wangpan
      assetsId: [],//shebei
    }
  },

  computed: {
    itemNo: function() {
      return this.$route.params.itemNo
    },

    isRead: function() {
      return this.$route.params.isRead || '1'
    },

    facility: function() {
      let finId = this.assetsId.map(item => item.facilityId).join(',')
      if(finId.slice(0, 1) == ','){
        return finId.substring(1, finId.length)
      }
      return finId
    },

    dishId: function() {
      let disId = this.netdiskId.map(item => item.dishId).join(',')
      if(disId.substring(0, 1) == ','){
        return disId.substring(1, disId.length)
      }
      return disId
    },

    showNetwork: function() {
      let disName = this.netdiskId.map(item => item.dishName).join(',')
      if(disName.substring(0, 1) == ','){
        return disName.substring(1, disName.length - 1)
      }
      return disName
    },

    showDish: function() {
      let netName = this.assetsId.map(item => item.facilityName).join(',')
      if(netName.substring(0, 1) == ','){
        return netName.substring(1, netName.length - 1)
      }
      return netName
    }
  },

  created() {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.ruleForm.userId = user.id || ''
    }
    this.getData()
  },

  methods: {
    //獲取數據
    getData() {
      this.loading = true
      this.$store.dispatch('netdisk/fetchLawCaseInfo', { itemNo: this.itemNo }).then(res => {
        this.assetsId = res.result.gpsFacilityList.filter(item => item.facilityState === 0)
        this.netdiskId = res.result.gpsUDishList
        this.loading = false
      }).catch(err => {
        console.error(err)
        // this.loading = false
        this.$message.error('專案詳情獲取失敗!' + err)
        return false
      })
    },

    //提交修改
    onNext() {
      this.loading = true
      if(!this.ruleForm.lawPwd || !this.ruleForm.reNewPassword) {
        this.loading = false
        this.$message.error('專案密碼不能為空！')
        return false
      }
      let strongRegex = new RegExp("^(?!^[0-9a-z]+$)(?!^[0-9A-Z]+$)(?!^[0-9\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)(?!^[a-zA-Z]+$)(?!^[a-z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)(?!^[A-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)(?!^[A-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)[a-z0-9A-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$")
      if(!strongRegex.test(this.ruleForm.lawPwd) || this.ruleForm.lawPwd.length > 12 || this.ruleForm.lawPwd.length < 8) {
        this.loading = false
        this.$message.error('專案密碼必須為8-12位，並由數字，大小寫字母及特殊符號組成！')
        return false
      }
      //校验密码不一致
      if(this.ruleForm.lawPwd !== this.ruleForm.reNewPassword) {
        this.loading = false
        this.$message.error('兩次輸入的密碼不一致！')
        return false
      }
      //判断是否至少连接两部网盘
      // console.log(this.facility)
      let connectIndex = 0
      this.netdiskId.forEach(item => {
        if(item.id != '') connectIndex++
      })
      if(connectIndex <2) {
        this.loading = false
        this.$message.error('請至少連接兩部網盤！')
        return false
      }
      //修改案件提交
      this.$store.dispatch('netdisk/fetchLawEditLawCase',
      { ...this.ruleForm, dishIds: this.dishId, facilitys: this.facility, lawCaseId: this.itemNo }).then(res => {
        this.loading = false
        this.$message.success(res.message)
        this.flag = true
      }).catch(err => {
        console.error(err)
        // this.loading = false
        this.$message.error('專案創建失敗!' + err)
        return false
      })
      this.loading = false
    },

    //从专案詳情页面打开地图
    onToMap() {
      this.$router.push({ name: 'mapIndex', params: { itemNo: this.itemNo } })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .el-steps {
    margin: 50px 0;
  }

  .next {
    margin: 50px;
    float: right;
  }

  .form-box {
    padding: 10px 50px;
  }

  .ml50 {
    margin-left: 50px;
  }
}

.baseColor {
  color: $baseColor;
}

.connectColor {
  color: $connectColor
}

.disconnectColor {
  color: $disconnectColor;
}
</style>
